<template>
  <div class="box">
    <h2>小黑记事本</h2>
    <!-- 输入非空的内容，点击+按钮后，如果内容不为空，则将新的记录添加到列表中，同时清空当前输入的内容 -->
    <input type="text" placeholder="请输入非空内容，点击加号记录" v-model="todo" @keyup.enter="addTodo" />
    <button @click="addTodo">+</button>
    <!-- 显示用户待办事项的列表，双击当前列表项或者点击X按钮后，删除当前记录 -->
    <ul class='items'>
      <li class="item" v-for="(item, index) in todoList" :key="'todo' + index" @dblclick="removeTodo(index)">
        {{ index+ 1 }} · {{ item }}
        <button class="sub" @click="removeTodo(index)">X</button>
      </li>
    </ul>
    <p>双击栏目删除对应数据</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 待办输入
const todo = ref("")
// 待办列表
const todoList = ref(['吃饭', '睡觉', '敲代码'])

// 添加待办方法
const addTodo = () => {
  if(todo.value === ""){
    alert("输入不允许为空")
    return
  }
  todoList.value.push(todo.value)
  todo.value = ""
}

// 删除待办事项
const removeTodo = (index)=>{
  todoList.value.splice(index, 1)
}


</script>

<style lang="scss" scoped>
.box {
  text-align: center;
}

h2 {
  text-align: center;
  margin-top: 100px;
}

body {
  text-align: center;
}

input {
  width: 300px;
  height: 30px;
  border-radius: 5px;
  font-size: 16px;
  padding-left: 10px;
  outline: none;
  border: 1px solid #000;
}

button {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  box-shadow: none;
  border: none;
  font-size: 21px;
  cursor: pointer;
}

p {
  color: #aaa;
}

.items {
  list-style: none;
  padding: 0;
  width: 350px;
  margin: 20px auto;
}

.items .item {
  font-size: 16px;
  line-height: 32px;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

button.sub {
  width: 25px;
  height: 25px;
  font-size: 12px;
  float: right;
  margin-top: 5px;
}

button.sub:hover {
  color: red;
}
</style>